<template>
  <div>
    <el-card>
      <!-- 查询条件 -->
      <el-form :model="param" label-width="80px" label-position="left">
        <el-row :gutter="20">
          <el-col :lg="8" :xl="6">
            <el-form-item label="机构名称">
              <el-input v-model="param.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="机构编号">
              <el-input v-model="param.code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label-width="0px">
              <HButton type="search" @click="enquire">搜索</HButton>
              <HButton type="reset" @click="restForm">重置</HButton>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 按钮组 -->
      <el-row type="flex">
        <HButton type="add" @click="add">新增机构</HButton>
      </el-row>
      <!-- 表格 -->
      <el-table class="mt-20" :data="tableData" border stripe>
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="code" label="机构编号" align="center">
        </el-table-column>
        <el-table-column prop="name" label="机构名称" align="center">
        </el-table-column>
        <el-table-column prop="placeName" label="机构地址" align="center">
        </el-table-column>
        <el-table-column prop="mechAccount" label="机构账号" align="center">
        </el-table-column>
		<el-table-column prop="mechRole" label="机构类型" align="center">
			<template slot-scope="scope">
				<el-tag
				          :type="scope.row.mechRole === 1 ? 'primary' : 'success'"
				          disable-transitions>{{scope.row.mechRole==1?'监管机构':'医院机构'}}</el-tag>
				
			</template>
		</el-table-column>
  
      </el-table-column>
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          width="200px"
        >
          <template slot-scope="scope">
            <HButton @click="edit(scope.row)" type="update" size="mini"
              >修改</HButton
            >
            <HButton
              @click="del(scope.row)"
              type="delete"
              size="mini"
              v-if="scope.row.status == '0'"
              >停用</HButton
            >
            <HButton
              @click="start(scope.row)"
              type="delete"
              size="mini"
              v-if="scope.row.status == '1'"
              >启用</HButton
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="param.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="param.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <addDia ref="addDia" @transData="transData"></addDia>
  </div>
</template>

<script>
import addDia from "./components/organization-add";
import { getAll, editMechanism } from "@/api/family_doctor/family_doctor";
export default {
  components: { addDia },
  data() {
    return {
      ifAdd: true,
      total: 0,
      tableData: [],
      param: {
        page: 1,
        limit: 10,
        code: "",
        name: "",
      },
      delParam: {
        id: "",
        status: "",
        name: "",
        placeId: "",
        code: "",
      },
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    //获取列表
    getTableData() {
      getAll(this.param).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    //搜索
    enquire() {
      this.param.page = 1;
      this.param.limit = 10;
      this.getTableData();
    },
    //重置
    restForm() {
      this.param.name = "";
      this.param.code = "";
    },
    //添加
    add() {
      this.ifAdd = true;
      this.$refs.addDia.openDialog(this.ifAdd);
    },
    //修改
    edit(scope) {
      this.ifAdd = false;
      this.$refs.addDia.openDialog(this.ifAdd, scope);
    },
    //停用
    async del(scope) {
      const confirmResult = await this.$confirm(
        "机构名为" + scope.name + ",地址在" + scope.placeName + "，是否停用？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消停用");
      }
      this.delParam = scope;
      this.delParam.status = 1;
      editMechanism(this.delParam).then((res) => {
        if (res.code == "AA000000") {
          this.$message.success("停用成功");
        }
        this.getTableData();
      });
    },
    //启用
    start(scope) {
      this.delParam = scope;
      this.delParam.status = 0;
      editMechanism(this.delParam).then((res) => {
        if (res.code == "AA000000") {
          this.$message.success("启用成功");
        }
        this.getTableData();
      });
    },
    //几页每条
    handleSizeChange(size) {
      this.param.limit = size;
      this.getTableData();
    },
    //第几页
    handleCurrentChange(page) {
      this.param.page = page;
      this.getTableData();
    },
    //供子组件调用函数
    transData() {
      this.getTableData();
    },
  },
};
</script>